<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="telephone=no" name="format-detection">
<meta charset="UTF-8">
<title>线路选择</title>
<link rel="stylesheet" href="${ctxStatic }/mui/css/mui.min.css">
<link rel="stylesheet" href="${ctxStatic }/wx/css/tour_charters.css" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/personal_a.css" />
<script src="${ctxStatic }/mui/js/mui.min.js"></script>
<script src="${ctxStatic }/zepto/zepto.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/mui/js/mui.view.js" ></script>
<style>
		.mui-content,
		body {
			background: #f5f5f5;
		}
		.mui-table-view {
			margin-top: 0 !important;
		}
		.mui-pages{
			top: 44px;
		}
		.mui-table-view-cell{
			border-radius:none;
			}
	</style>
</head>
<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<div id="tour_charter" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">线路详情</h1>
			</div>
			<div class="mui-page-content">
		<form id="subForm" method="post" action="${ctxWx }/rentproduct/travelBook">
		<input type="hidden" name="departcity" value="${param.departcity}"/>
		<input type="hidden" name="destcity" value="${param.destcity}"/>
		<input id="pageNo" name="pageNo" type="hidden" value="1"/>
		<input id="pageSize" name="pageSize" type="hidden" value="100"/>
        <input type="hidden" name="linename" value="${param.linename }" />
        </form>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="tourcars_list">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell" style="margin: 0;">
									<div class="tourc_img">
										<img src="https://www.xiakeyueche.com${tLine.linepic }" />
									</div>
									<div class="mui-row tourc_txt">
										<div class="mui-col-xs-9">
											<p>${tLine.linename }</p>
										</div>
										<div class="mui-col-xs-3">
											<span>￥
									<fmt:formatNumber type="number" value="${param.lowestPrice }" pattern="0" maxFractionDigits="0"/>			
												起</span>
										</div>
									</div>
								</li>
							</ul>
						</div>
								<div class="tourcars_explan">
							<p class="tours_lione">
								<i class="online_ico">
				 	 	 	 <img src="${ctxStatic }/wx/img/day_img/xianlu@2x.png" />
				 	 	 </i>
								<span>线路描述</span>
							</p>
							<div class="tourc_txts">
								<c:forEach items="${map}" var="item"> 
								<p>第${item.key}天</p>
								<p>
									 <pre style="white-space: pre-wrap;">${item.value }</pre>
								</p>
								 </c:forEach>    
							</div>
						</div>
						<div class="tourcars_notice">
							<a href="#tourc_line_box">
								<p>
									<i class="online_ico">
				 	 	 	             <img src="${ctxStatic }/wx/img/day_img/xuzhi_atbc@2x.png" />
				 	 	            </i>
									<span>线路须知</span>
									<span class="mui-icon mui-icon-arrowright tourc_line"></span>
								</p>
							</a>
						</div>
					</div>
				</div>
			</div>
		    <nav class="mui-bar mui-bar-tab tourc_nextup">
				<button id="sub">下一步</button>
			</nav>
		</div>
		<div id="tourc_line_box" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">线路须知</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
                          <div class="notice_main">
                          	  <p>1、该线路包车支持往返交通服务。如用车人临时更改行车路线，需与车队自行协商，产生的额外费用也由用车人自行承担；</p>
                              <p>2、霞客约车倡导自主性、个性化的包车旅行，如个别游玩景点需要调整，可线下与车队沟通，实际执行以线下协商为准；</p>
                              <p>3、以上行程时间及景点顺序安排仅供参考，可根据实际情况调整游览顺序，景区游玩时间以游客与司机的约定为准。如遇旺季或节假日可能会出现堵车严重而造成的时间延迟的情况，敬请谅解。</p>
                          </div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#tour_charter'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			view.addEventListener('pageShow', function(e) {
				if(e.detail.page.id == 'city') {
					document.getElementById('search').focus();
					// 站点数据
					getSiteData();
				}
			});
		})(mui);

			//点击下拉
			Zepto(function() {
				$('.tourc_down').on('tap', function() {
					$('.tourc_record').toggle();
					var hklo = $('.tourc_down').children('i');
					if(!hklo.hasClass('tourxil')) {
						hklo.addClass('tourxil')
					} else {
						hklo.removeClass('tourxil')
					}
				});
				$('#sub').on('tap', function() {
					$('#subForm').submit();
				})
			})
		</script>
	</body>

</html>